<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的评论</title>
<!-- 引入bootStrap -->
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../p2-crowdfunding/js/jquery-1.42.min.js"></script>
<script type="text/javascript" src="../p2-crowdfunding/js/jquery.js"></script>
<link rel="stylesheet" href="../p2-crowdfunding/css/headbott.css" type="text/css"/>
</head>
<style>
*{margin: 0;padding:0;}
    body{margin:0px;padding:0px;font-size:12px;font-family: "微软雅黑", Arial; text-align:center;color:#000;}
    div,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,img,form{margin:0;padding:0;border:0;}
    ul,ol,li{list-style:none;}
    img{border:0; vertical-align:top;}
    a{text-decoration:none; cursor:pointer;color:#5A5A5A}
    a:hover{text-decoration:underline;}
    table,td,tr,th,input,select{font-size:13px;}
    input{font-family:Arial;} /*text and password width*/
    table,td{ border-collapse:collapse;}
    a:link{text-decoration:none;border:none;}
    a:hover{ text-decoration:none;border:none;}
    a:active{}
    a{}
    a:hover, a:visited{}
    .clear{ zoom:1;}
    .clear:after{ display:block;clear:both;height:0;content:''}



body{background: #f9f9f9;color:#5A5A5A}


.user-con{width: 1000px;margin: 20px auto;
        zoom: 1;overflow: auto;}

.user-conl{float: left;width: 175px;border:1px solid #c0c0c0;background: #f9f9f9;border-right: none}
    .user-conl li i{width:19px;height: 20px;position:absolute;left:30px;top:15px;display: inline-block;}
    .user-conl li .i1{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 0;}
    .user-conl li .i2{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -50px;}
    .user-conl li .i3{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -100px;}
    .user-conl li .i4{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -153px;}
    .user-conl li .i5{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -153px;}
    .user-conl li .i6{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -50px;}
    .user-conl li .i7{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -206px;}
    .user-conl li .i8{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -253px;}
    .user-conl li .i9{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -323px;}
    .user-conl li .i10{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat 0 -376px;}
	.user-conl li{position: relative}
	.user-conl li a{display:inline-block;height:50px;width:175px;line-height:50px;border-left: 2px solid #f9f9f9;border-bottom:1px #ebebeb solid; }
	.user-conl li b{display:inline-block;height:50px;width:175px;line-height:50px;border-left: 2px solid #f9f9f9;border-bottom:1px #ebebeb solid; }
	.user-conl li a:hover{background:#fff;color:#009fd6;border-bottom:1px solid #009fd6;border-left: 2px solid #009fd6;}
	.user-conl li .u-hover{background:#fff;border-left: 2px solid #f9f9f9;border-bottom:1px solid #009fd6;border-left: 2px solid #009fd6;color:#009fd6}
	.user-conl li .a-tit{font-size:18px;}
	.user-conl li:hover .i1{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px 0;}
	.user-conl li:hover .i2{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -50px;}
	.user-conl li:hover .i3{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -100px;}
	.user-conl li:hover .i4{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -153px;}
	.user-conl li:hover .i5{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -153px;}
	.user-conl li:hover .i6{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -50px;}
	.user-conl li:hover .i7{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -206px;}
	.user-conl li:hover .i8{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -19px -253px;}
	.user-conl li:hover .i9{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -20px -323px;}
	.user-conl li:hover .i10{background:url("../p2-crowdfunding/images/Myhome_icom.png") no-repeat -20px -376px;}

.user-conr{float: left;width:800px;border-zoom: 1;overflow: auto;background:#fff}
	.user-conr_tab{width:798px;height:50px;border: 1px solid #c0c0c0; padding:20px 0 0 20px; border-bottom:none;}
	.user-conr_tab .mytitle{width:200px;font-size:20px; float: left; padding:0 ;}
	.user-conr_tab2{width:798px;min-height:552px;overflow: auto;zoom: 1;border: 1px solid #c0c0c0;border-top:none;}
	.user-conr_tab2 .tab2{padding:20px;}
	.user-conr_tab2 .table th{text-align:center;}
	.page_info_area{float: left; margin-left:50px;}
	.page_nav_area{float: right; margin-right:100px;}
</style>
<body>
<!-- 追加评价Modal -->
<div class="modal fade" id="commentAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">追评</h4>
        <input type="hidden" name="userId" id="userId" value="" >
        <input type="hidden" name="psId" id="psId" value="">
      </div>
      <div class="modal-body">
        	<form class="form-horizontal" id="modal_add_form">
			  <div class="form-group">
			    <label for="psName_add_input" class="col-sm-2 control-label">项目名称</label>
			    <div class="col-sm-10">
			      <p class="form-control-static" id="psName_add_static"></p>
			      <span class="help-block">
			      </span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">项目目的</label>
			    <div class="col-sm-10">
			      <p class="form-control-static" id="psGoal_add_static"></p>
			      <span class="help-block">
			      </span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">项目类型</label>
			    <div class="col-sm-10">
			      <p class="form-control-static" id="psType_add_static"></p>
			      <span class="help-block">
			      </span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">已筹金额</label>
			    <div class="col-sm-10">
			      <p class="form-control-static" id="psGetmoney_add_static"></p>
			      <span class="help-block">
			      </span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">支持人数</label>
			    <div class="col-sm-10">
			      <p class="form-control-static" id="psGetpeople_add_static"></p>
			      <span class="help-block">
			      </span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="sr-only">追评</label>
			    <div class="col-sm-10">
			      <input type="text" name="comments" class="form-control" id="comments_add_input" placeholder="对评价进行补充，更客观，更全面 ~">
			   	  <span class="help-block">
			      </span>
			    </div>
			  </div>
			</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="comment_save_btn">提交</button>
      </div>
    </div>
  </div>
</div>




<div id="header">
    <div class="heade-con">
        <div class="logo"><a href=""><img src="../p2-crowdfunding/images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a class="vcolor" href="index.jsp">首页</a></li>
                <li><a href="gyzc-list.jsp">公益众筹</a></li>
                <li><a href="cop.jsp">常见问题</a></li>
                <li><a href="ly-list.jsp">众筹资讯</a></li>
                <li><a href="new-product.jsp" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="search-txt" value="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
            <a  href="login.jsp">登录</a>
            <a href="reg.jsp">注册</a>
        </div>
    </div>
</div>
<script>

    var d_var=$(".search .search-txt").val();
    $(".search .search-txt").focus(function(){
        if($(this).val()==d_var){
            $(this).val("");
        }});

    $(".search .search-txt").blur(function(){
        if($(this).val()==""){
            $(this).val("找项目");
        }
    });
</script>
<div class="user-con">
    <div class="user-conl">
<ul>
    <li><b class="a-tit" href="">项目管理</b></li>
    <li><i class="i1"></i><a href="">发起的项目</a></li>
    <li><i class="i2"></i><a href="">参与的项目</a></li>
    <li><i class="i6"></i><a href="">资金管理</a></li>
    <li><b class="a-tit" href="">消息管理</b></li>
    <li><i class="i4"></i><a class="u-hover" href="../comments/my_comments.jsp">我的评论</a></li>
    <li><i class="i4"></i><a href="">我的私信</a></li>
    <li><b class="a-tit" href="">个人设置</b></li>
    <li><i class="i7"></i><a href="">资料修改</a></li>
    <li><i class="i8"></i><a href="">安全信息</a></li>
    <li><i class="i9"></i><a href="">收件地址管理</a></li>
    <li><i class="i10"></i><a href="">实名认证</a></li>
</ul>
    </div>
    
	<div class="user-conr">

		<div class="user-conr_tab">
			<div class="mytitle">我的评论</div>
			
		</div>
		
        <div class="user-conr_tab2">
			<div class="panel-body tab2">
				<div class="table-responsive ">
            		<table class="table table-striped table-bordered" id="comments_table">
              		<thead>
                		<tr>
                  			<th>#</th>
				  			<th>项目名称</th>
              	  			<th>我的评论</th>
              	  			<th>操作</th>
                		</tr>
              		</thead>
              		<tbody>
                
              		</tbody>
            		</table>
          		</div>
			</div>
    		<!-- 显示分页信息 -->
    			<!-- 分页文字信息 -->
        		<div class="page_info_area" id="page_info_area">
                   
        		</div>	
        		<!-- 分页条信息 -->
        		<div class="page_nav_area"  id="page_nav_area">
        
        		</div>
		</div>
			
	</div>
</div>
<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">我们已经做到 </li>
            <li>单项支持人数<span class="inde-span1"></span></li>
            <li>单项筹款金额<span class="inde-span2"></span></li>
            <li>累计筹款金额<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li class="bot-con1-li1">发起项目流程 </li>
            <li><span class="inde-span4"></span>发起人创建项目</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>用户收到回报</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="../p2-crowdfunding/images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

        <a href=" ">关于淘宝</a>
        <a href=" ">合作伙伴</a>
        <a href=" ">营销中心</a>
        <a href=" ">廉正举报</a>
        <a href=" ">联系客服</a>
        <a href=" ">开放平台</a>
        <a href=" ">诚征英才</a>
        <a href=" ">联系我们</a>
        <a href=" ">网站地图</a>
        <a href=" ">法律声明</a>　　　
        <em>© 2003-2015 Taobao.com 版权所有</em><br>
        <br>
        <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
        <b>|</b>
        <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
        <b>|</b>
        <span>信息网络传播视听节目许可证：1109364号</span>
        <b>|</b>
        <span>举报电话:0571-81683755</span>
    </div>
</div>

<script type="text/javascript">
//页面加载完毕后，发送ajax请求，拿到分页数据
	$(function(){
		alert("1");
		$.ajax({
			url:"${APP_PATH}/getCommentsByUserId/1",
			data:"pn=1",
			type:"GET",
			success:function(result){
				//console.log(result);
				build_comments_table(result);
				build_page_info(result);
				//2.解析并显示分页数据
				build_page_nav(result)
			}
		});
	});
	
	function to_page(pn){
	  	   $.ajax({
	   		  url:"${APP_PATH}/getCommentsByUserId/1",
	   		  data:"pn="+pn,
	   		  type:"GET",
	   		  success:function(result){
	   			//1. 解析并显示员工数据
	   			//console.log(result);
	   			build_comments_table(result);
	   			//2.
	   			build_page_info(result);
	   			//3. 解析并显示分页数据
	   			build_page_nav(result)
	   		  }
	   	  });
	 }
	
	function build_comments_table(result){
		//清空表格
		$("#comments_table tbody").empty();
		var comments=result.extend.pageInfo.list;
		var i = 1;
		$.each(comments,function(index,item){
			//alert(item.empName);
			var IdTd=$("<td></td>").append(i);
			var cmIdTd=$("<td style='display:none;'></td>").append(item.cmId);
			var psNameTd=$("<td></td>").append(item.projects.psName);
			var cmContentTd=$("<td></td>").append(item.cmContent);
			var addBtn=$("<button></button>").addClass("btn btn-primary btn-sm add_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
				.append("追加评价");
			viewBtn.attr("add_id",item.cmId);
			var spanBtn=$("<span></span>").append("&nbsp;&nbsp;&nbsp;");
			var delBtn=$("<div id='delete_Account_btn' ></div>").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
				.append("删除");
			delBtn.attr("delete_id",item.cmId);
			var btnTd=$("<td></td>").append(addBtn).append(spanBtn).append(delBtn);
			$("<tr></tr>").append(IdTd)
						  .append(cmIdTd)
						  .append(psNameTd)
						  .append(cmContentTd)
						  .append(btnTd)
						  .appendTo("#comments_table tbody");
			i++;
			alert(3);
		});
	}
	
	 
	//解析显示分页信息
	function build_page_info(result){
		$("#page_info_area").empty();
		$("#page_info_area")
		.append("当前第"+result.extend.pageInfo.pageNum+
				"页,总共"+result.extend.pageInfo.pages+"页,总共"
				+result.extend.pageInfo.total+"条记录");
	}
	
	//解析显示分页条
	function build_page_nav(result){
		 $("#page_nav_area").empty();
  	   var ul=$("<ul></ul>").addClass("pagination");
  	   
  	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
  	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
  	   if(result.extend.pageInfo.hasPreviousPage==false){
  		   firstPageLi.addClass("disabled");
  		   prePageLi.addClass("disabled");
  	   }else{    		   
  	  		 prePageLi.click(function(){
  		   		to_page(result.extend.pageInfo.pageNum-1);
  	  		 });
  	   		firstPageLi.click(function(){
  		   		to_page(1);
  	   		});
  	   }
  	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
  	   
  	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
  	   if(result.extend.pageInfo.hasNextPage==false){
  		   nextPageLi.addClass("disabled");
  		   lastPageLi.addClass("disabled");
  	   }else{    		   
  	   		nextPageLi.click(function(){
  		   		to_page(result.extend.pageInfo.pageNum+1);
  	   		});
  	   		lastPageLi.click(function(){
  		   		to_page(result.extend.pageInfo.pages);
  	   		});
  	   }
  	   
  	   ul.append(firstPageLi).append(prePageLi);
  	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
  	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
  		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
  		   if(result.extend.pageInfo.pageNum==item){
  			   numLi.addClass("active");
  		   }
  		   numLi.click(function(){
  			   to_page(item);
  		   });
  		   ul.append(numLi);
  	   });
  	   ul.append(nextPageLi).append(lastPageLi);
  	   //把ul添加到nav
  	   var navEle=$("<nav></nav>").append(ul);
  	   navEle.appendTo("#page_nav_area");
	}
	
	$(document).on("click",".add_btn",function(){
		
		
		getEmp($(this).attr("add_id"));
		//弹出模态框
		$("#commentsAddModal").modal({
			backdrop:"static"
		});
		
	})
	
	function getEmp(cmId){
     	$.ajax({
     		url:"${APP_PATH}/getDetailedComment/"+cmId,
     		type:"GET",
     		success:function(result){
     			//console.log(result);
     			var commentData=result.extend.comment;
     			$("#psName_add_static").text(commentData.projects.psName);
     			$("#psGoal_add_static").text(commentData.projects.psGoal);
     			$("#psType_add_static").text(commentData.projectsType.pstName);
     			$("#psGetmoney_add_static").text(commentData.projects.psGetmoney);
     			$("#psGetpeople_add_static").text(commentData.projects.psGetpeople);
     			$("#userId").val(commentData.userId);
     			$("#psId").val(commentData.psId);
     		}
     	});
     }
	
	
	//点击  提交评论
	$("#comment_save_btn").click(function(){
		var userId=$("#userId").val;
		var psId=$("#psId").val;
		//1.模态框中填写的表单数据交给服务器进行保存
		//alert($("#empAddModal form").serialize());
		//2.发送ajax请求
		$.ajax({
			url:"${APP_PATH}/saveComment",
			type:"POST",
			data:$("#commentsAddModal form").serialize()+"&userId="+userId+"&psId="+psId,
			success:function (result){
				 if(result.code==100){    //jsr303验证成功				 
	    			 	alert(result.msg);			 	
	    			 	$("#commentsAddModal").modal('hide');
	    			 	
	    			 }else{//验证失败
	    				 alert("失败");
	    			 	}
	    			 }
			}
		});
	});
	
    //对form表单重置
	$('#commentsAddModal').on('hidden.bs.modal', function (){
		//清空信息
		document.getElementById("modal_add_form").reset();
	});
    
</script>
</body>

</html>